<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读了么！-上架书籍</title>
    <link href="style/setUs.css" rel="stylesheet" type="text/css">
    <link href="style/myShop.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<header>
    <div class="head_d">
        <div class="leftH"></div>
        <div class="rightH"></div>
    </div>
</header>
<div class="gl">
    <span>读了么</span>卖家工作平台
</div>
<div class="manage">
    <div class="leftM">
        <div class="categoryFirst">
            <img src="image/c1.png">
            <span class="title">店铺管理</span>
            <ul class="list">
                <li><a href="shopIndex.jsp">我的店铺</a></li>
            </ul>
        </div>
        <hr/>
        <div class="category">
            <div>
                <img src="image/c2.png">
                <span class="title">交易管理</span></div>
            <ul class="list">
                <li>已卖出的商品</li>
                <li>评价管理</li>
            </ul>
        </div>
        <div class="category">
            <div class="list">
                <img src="image/c3.png">
                <span class="title">物流管理</span></div>
            <ul class="list">
                <li ><a href="shopSendGoods.jsp">发货</a></li>
                <li>物流工具</li>
            </ul>
        </div>
        <div class="category">
            <img src="image/c4.png">
            <span class="title">商品管理</span>
            <ul class="list">
                <li><a href="shopUpperShelf.html">发布书籍</a></li>
                <li><a href="shopSellBook.jsp">出售中的书籍</a></li>
            </ul>
        </div>
        <div class="categoryLast">
            <img src="image/c5.png">
            <span class="title">客户服务</span>
            <ul class="list">
                <li>退款管理</li>
                <li>违规记录</li>
            </ul>
        </div>
    </div>
    <div class="rightM">
        <div class="firstT"><span>我的店铺</span></div>
        <div class="lc-title"><span>上架书籍：</span></div>
        <!--        上传数据-->
        <form enctype="multipart/form-data" action="/upload/book" method="post">
            <div class="dXX">
                <a>书籍名称：</a><input type="text" name="bookName" class="bookName"><br><br>
                <a>价格：</a><input type="text" name="price" class="price"><span>元</span><br><br>
                <a>数量：</a><input type="text" name="bookNum" class="number"><span>本/册/套</span><br><br>
                <a>作者：</a><input type="text" name="author" class="bookAuhor"><br><br>
                <a>出版社：</a><input type="text" name="press" class="bookPress"><br><br>
                <a>出版日期：</a><input type="date" name="publishDate" class="bookDate"><br><br>
                <a>类别：</a>
                <select id="cate" name="category" onchange="shows()">
                    <option value="" disabled selected>请选择书籍类型</option>
                    <option value="文学">文学</option>
                    <option value="流行">流行</option>
                    <option value="文化">文化</option>
                    <option value="生活">生活</option>
                    <option value="经管">经管</option>
                    <option value="科技">科技</option>
                </select>
                <select id="scate" name="category1">
                    <option value="" disabled selected>请选择类型</option>
                </select><br><br>
                <script>
                    var wx=['小说','外国文学','中国文学','随笔','名著','诗歌'];
                    var lx=['推理','青春','科幻','武侠','奇幻'];
                    var wh=['历史','设计','戏剧','国学'];
                    var sh=['旅行','爱情','励志','教育'];
                    var jg=['经济学','金融','股票','创业','商业'];
                    var kj=['科普','编程','用户体验','神经网络','web'];
                    function shows() {
                        var category=$("#cate option:selected").text();
                        if(category=='文学') {
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(wx[i]);
                                $(option).text(wx[i]);
                                $('#scate').append(option);
                            }
                        }else if(category=='流行'){
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(lx[i]);
                                $(option).text(lx[i]);
                                $('#scate').append(option);
                            }
                        }else if(category=='文化'){
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(wh[i]);
                                $(option).text(wh[i]);
                                $('#scate').append(option);
                            }
                        }else if(category=='生活'){
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(sh[i]);
                                $(option).text(sh[i]);
                                $('#scate').append(option);
                            }
                        }else if(category=='经管'){
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(jg[i]);
                                $(option).text(jg[i]);
                                $('#scate').append(option);
                            }
                        }else if(category=='科技'){
                            $("#scate").empty();
                            for (var i = 0; i < wx.length; i++) {
                                var option = document.createElement("option");
                                $(option).val(kj[i]);
                                $(option).text(kj[i]);
                                $('#scate').append(option);
                            }
                        }
                    }
                </script>
                <div><a>描述：</a></div>
                <textarea type="text" name="describe" class="describe" placeholder="书籍简介等"></textarea>
                <div class="bookImg">
                    <div><a>书籍图片：</a></div>
                    <canvas id="can" width="200px" height="200px"></canvas>
                    <input type="file" value="上传图片" id="upload" name="upload">
                </div>
                <div class="btnUpper">
                    <input type="submit" value="立刻发布" id="bookUpper"><br>
                    <a style="font-size: 10px;color: red">发布之后就会在您的店铺里展示给买家！</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" color="100,149,237" opacity='0.7' zIndex="-2" count="99" src="js/canvas-nest.js"></script>
</body>
<script>
    //获取上传按钮
    var input1 = document.getElementById("upload");
    if (typeof FileReader === 'undefined') {
        //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input1.setAttribute('disabled', 'disabled');
    } else {
        input1.addEventListener('change', readFile, false);
    }

    function readFile() {
        var file = this.files[0]; //获取上传文件列表中第一个文件
        if (!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片！");
            return false;
        }
        // console.log(file);
        var reader = new FileReader(); //实例一个文件对象
        reader.readAsDataURL(file); //把上传的文件转换成url
        //当文件读取成功便可以调取上传的接口
        reader.onload = function (e) {
            var image = new Image();
            // 设置src属性
            image.src = e.target.result;
            var max = 200;
            // 绑定load事件处理器，加载完成后执行，避免同步问题
            image.onload = function () {
                // 获取 canvas DOM 对象
                var canvas = document.getElementById("can");
                // 如果高度超标 宽度等比例缩放 *=
                // 获取 canvas的 2d 环境对象,
                var ctx = canvas.getContext("2d");
                // canvas清屏
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 重置canvas宽高
                // 将图像绘制到canvas上
                // ctx.drawImage(image, 0, 0, image.width, image.height);
                ctx.drawImage(image, 0, 0, 200, 200);
                // 注意，此时image没有加入到dom之中
            };
        }
    };
</script>
</html>
